<template>
    <div>
        <h2>BetterScroll 2.0 滚动插件 - 横向演示</h2>
        <div class="observe-dom-container">
            <div class="scroll-wrapper" ref="horizontalScrollRef">
                <div class="scroll-content">
                    <div class="scroll-item__wrap" v-for="num in counter" :key="num">
                        {{ counter - num + 1 }}
                    </div>
                </div>
            </div>
            <button class="btn" @click="handleClick">append two children element</button>
        </div>
    </div>
</template>

<script setup>
import BScroll from "better-scroll";
import ObserveDOM from "@better-scroll/observe-dom";

BScroll.use(ObserveDOM);
const horizontalScrollRef = ref(null);
const bscroll = ref(null);
const counter = ref(23);

const handleClick = () => {
    counter.value += 2;
};

nextTick(() => {
    bscroll.value = new BScroll(horizontalScrollRef.value, {
        observeDOM: true,
        scrollX: true,
        scrollY: false,
    });
});

onBeforeUnmount(() => {
    bscroll.value.destroy()
})
</script>

<style lang="scss">
.observe-dom-container {
    text-align: center;
}
.scroll-wrapper {
    width: 90%;
    margin: 80px auto;
    white-space: nowrap;
    border: 3px solid #42b983;
    border-radius: 5px;
    overflow: hidden;
}

.scroll-content {
    display: inline-block;
}

.scroll-item__wrap {
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    display: inline-block;
    text-align: center;
    padding: 0 20px;
    &:nth-child(2n) {
        background-color: #c3d899;
    }
    &:nth-child(2n + 1) {
        background-color: #f2d4a7;
    }
}
.btn {
    margin: 40px auto;
    padding: 10px;
    color: #fff;
    border-radius: 4px;
    font-size: 20px;
    background-color: #666;
}
</style>
